<template>
  <div class="nav-menu">
    <div class="left-content">
      <el-menu
        default-active="2-2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#002140"
        :collapse="isCollapse"
        >
            <el-menu-item class="nav-title">
                <span>北京市医疗保障局</span>
            </el-menu-item>
            <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">大数据精算分析</span>
          </template>
          <router-link to="/">
            <el-menu-item index="1-1">药品目录范围调整</el-menu-item>
          </router-link>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-data-line"></i>
            <span slot="title">医疗服务分析</span>
          </template>
          <router-link to="/medicalAnalysis">
            <el-menu-item index="2-1">医疗服务项目费用结算分析</el-menu-item>
          </router-link>
          <router-link to="/menteAnalysis">
            <el-menu-item index="2-2">门特病分析</el-menu-item>
          </router-link>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-stopwatch"></i>
            <span>诊疗服务项目库</span>
          </template>
          <router-link to="/medicalServices">
            <el-menu-item index="3-1">北京诊疗服务项目库</el-menu-item>
          </router-link>
          <router-link to="/drugCostAnalysis">
            <el-menu-item index="3-2">药品费用结算分析</el-menu-item>
          </router-link>
          <!-- <router-link to="/regnHosplvDrugFeeAna">
            <el-menu-item index="3-3">区域/医院等级药品费用分析</el-menu-item>
          </router-link>
          <router-link to="/fixmedinsDrugFeeAna">
            <el-menu-item index="3-4">定点医疗机构药品费用分析</el-menu-item>
          </router-link> 
          <router-link to="/test">
            <el-menu-item index="3-5">测试</el-menu-item>
          </router-link> -->
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-data-line"></i>
            <span slot="title">谈判药品落地情况</span>
          </template>
          <router-link to="/drugLandingStatistics">
            <el-menu-item index="4-1">谈判药品落地情况监测统计查询</el-menu-item>
          </router-link>
        </el-submenu>
            <el-submenu index="5">
                <template slot="title">
                    <i class="el-icon-data-line"></i>
                    <span slot="title">门特病分析</span>
                </template>
                <router-link
                    v-for="( item, index ) in menuList"
                    :to="item.link" 
                    :key="index">
                    <el-menu-item :index="`5-${index + 1}`">{{item.name}}</el-menu-item>
                </router-link>
            </el-submenu>
      </el-menu>
    </div>
    <div class="right-content">
      <div class="top-content">
        <div class="info">
          <i :class="isCollapse == true ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="openCloseNav"></i>
          <span class="name">功能名称</span>
        </div>
      </div>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        isCollapse: false,
        cachedViews: ['DrugCostAnalysis'],
        menuList: [
            {
                name: "疾病地区和时间分布分析",
                link: "/diseaseTimeAnalysis",
            },
            {
                name: "疾病医疗费用负担趋势与费用结构分析",
                link: "/costIllness",
            },
            {
                name: "同时并发其他门特病分析",
                link: "/",
            },
            {
                name: "同时并发其他门特病明细分析",
                link: "/",
            },
            {
                name: "门特病待遇提升分析",
                link: "/",
            },
            {
                name: "门特病待遇提升明细",
                link: "/",
            },
        ]
      };
    },
  computed: {
    key() {
      return this.$route.fullPath;
    }
  },
  methods: {
    openCloseNav() {
      this.isCollapse = this.isCollapse === true ? false : true
    },
    handleOpen(key, keyPath) {
      console.log('111-----------')
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log('222-----------')
      console.log(key, keyPath)
    }
  }
}
</script>

<style scoped lang="less">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  min-height: 400px;
}
.nav-menu {
  height: 100vh;
  width: 100vw;
  display: flex;
  overflow: hidden;
  ::v-deep .el-menu {
    height: 100%;
    overflow: hidden;
    .el-menu-item {
      color: #b0b4bd;
    }
    .is-active {
      background: #0160c0 !important;
      color: #fff !important;
    }
  }
  .left-content {
    max-width: 250px;
    .nav-title {
      height: 50px;

      font-size: 18px;
      font-family: 'PingFangSC-Medium';
    }
    span {
      color: #fff;
    }
  }
  .right-content {
    flex: 1;
    overflow: auto;
    background: #f5f7fa;
    .top-content {
      height: 50px;
      background: #fff;
      .info {
        height: 50px;
        background: #fff;
        display: flex;
        align-items: center;
        padding-left: 10px;
        font-size: 22px;
        color: #303133;
        .name {
          font-size: 12px;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
